<template>
	<view>
		<view class="cu-bar search bg-white">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input v-model="keyword" :adjust-position="false" type="text" placeholder="搜索"
					confirm-type="search"></input>
			</view>
			<view class="action">
				<button @click="onSearch()" class="cu-btn bg-green shadow-blur round">搜索</button>
			</view>
		</view>
		<view v-if="!keywordCopy">
			<view class="cu-bar bg-white solid-bottom margin-top">
				<view class="action">
					<text class="cuIcon-title text-orange "></text> 热门商品
				</view>
			</view>
			<view class="cu-list menu margin-top">
				<view class="cu-item" v-for="(item,index) in hots" :key="index">
					<navigator :class="'color-'+index" class="content" hover-class="none"
						:url="'/pages/goods/goods?id='+item.id">
						{{item.title}}
					</navigator>
				</view>
			</view>
		</view>

		<GoodsList v-else :keyword="keywordCopy"></GoodsList>
	</view>
</template>

<script>
	import GoodsList from "@/pages/goods/list.vue"
	import GoodsApi from "@/api/goods";
	export default {
		components: {
			GoodsList
		},
		data() {
			return {
				keyword: '',
				hots: [],
				keywordCopy:''
			}
		},
		mounted() {
			this.getHotGoods()
		},
		methods: {
			getHotGoods() {
				GoodsApi.hot().then((res) => {
					this.hots = res;
				})
			},
			onSearch() {
				this.keywordCopy = this.keyword
			}
		}
	}
</script>

<style scoped>
	.color-0 {
		color: #ff0000;
	}

	.color-1 {
		color: #fa6652;
	}

	.color-2 {
		color: #f97c1d;
	}
</style>
